<template>
  <van-popup
    v-model="show"
    round
    closeable
    position="bottom"
    @close="resetData"
  >
    <van-cell class="cell-title cell-text" title="标签选择"> </van-cell>
    <div class="img-icon-box">
      <van-checkbox-group
        @change="onChange"
        v-model="result"
        direction="horizontal"
      >
        <div class="tagListArray" v-for="item in tagListArray" :key="item.id">
          <div class="title">{{ item.name }}</div>
          <div class="flex">
            <van-checkbox
              :name="child.id"
              :key="child.id"
              v-for="child in item.list"
            >
              <template #icon="props">
                <div
                  class="img-icon"
                  :class="props.checked ? 'activeIcon' : ''"
                >
                  {{ child.name }}
                </div>
              </template>
            </van-checkbox>
          </div>
        </div>
      </van-checkbox-group>
    </div>
    <div class="btn-save-box">
      <van-button @click="save" class="btn-save" type="primary" block
        >保存</van-button
      >
    </div>
  </van-popup>
</template>

<script>
import { tagList } from "@/api/dict";
export default {
  name: "VanSkeleton",
  data() {
    return {
      show: false,
      result: [],
      tagListArray: []
    };
  },
  methods: {
    init(result) {
      if (result) {
        this.result = result.split(",");
      }
      this.show = true;
      this.tagList();
    },
    onChange() {},
    resetData() {
      // this.result = {}
    },
    save() {
      let result = [];
      this.tagListArray.map(item => {
        if (item.list && item.list.length > 0) {
          item.list.map(child => {
            if (this.result.includes(child.id)) {
              result.push(child);
            }
          });
        }
      });
      this.show = false;
      this.$emit("saveTag", result);
    },
    tagList() {
      tagList({}).then(res => {
        this.tagListArray = res.data.tag_list;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.tagListArray {
  width: 100%;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.cell-title {
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
::v-deep .van-cell::after {
  border-bottom: 0;
}
.img-icon {
  height: 64px;
  background: #f2f2f2;
  border-radius: 8px;
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
  padding: 12px 32px;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  margin-right: 16px;
  margin-bottom: 16px;
}
::v-deep .van-checkbox__icon {
  height: inherit;
  line-height: inherit;
}
::v-deep .van-radio__icon {
  height: inherit;
  line-height: inherit;
}
.activeIcon {
  background: #fff0e5;
  border-radius: 8px;
  border: 1px solid #FF6900;
  color: #FF6900;
}
.img-icon-box {
  max-height: calc(50vh);
  padding: 0 40px 23px;
  overflow: auto;
}
.btn-save-box {
  padding: 0 40px 23px;
}
.title {
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
  padding-top: 24px;
  padding-bottom: 16px;
}
</style>
